<template>
  <div class="information">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <!-- 左侧 -->
          <div class="left">
            <ul v-for="(item,index) in allInfo" :key="index">
              <!-- 条数 -->
              <li v-if="showInfo && item.id<=5">
                <span>{{item.id}}:</span>
                {{item.title}}
              </li>
              <li v-if="showInfo1 && item.id<=10">
                <span>{{item.id}}:</span>
                {{item.title}}
              </li>
              <li v-if="showInfo3 && item.id<=20">
                <span>{{item.id}}:</span>
                {{item.title}}
              </li>
              <li>
                <ul
                  v-show="showPages && item.id<=10*(pageNumber) && item.id>10*(pageNumber-1)"
                  class="showPage"
                >
                  <li class="spanBody">
                    {{item.id}}:
                    <span>{{item.body}}</span>
                  </li>
                  <li class="edit-del">
                    <i class="el-icon-delete" @click="del(item.id)"></i>
                  </li>
                </ul>
              </li>
            </ul>
            <div class="block" id="page">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 20]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
            <el-backtop class="el-icon-caret-top"></el-backtop>
          </div>
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <div class="right">
            <el-input type="text" placeholder="日期:" v-model="rightData.dates" />
            <el-input type="text" placeholder="书名:" v-model="rightData.bookNames" />
            <el-input type="text" placeholder="作者:" v-model="rightData.authors" />
            <el-input type="text" placeholder="评分:" v-model="rightData.scores" />
            <el-input
              type="text"
              placeholder="请输入要查询的书名"
              :class="{border:true}"
              v-model="checkInformation"
            />
            <el-button class="btn" @click="changeInfomation">修改</el-button>
            <el-button class="btn-add" @click="addInformation">添加</el-button>
            <button @click="loading=!loading">loading</button>

            <el-table
              :data="filterInformation"
              border
              style="width: 100%"
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
            >
              <el-table-column fixed prop="dates" label="日期" width="50"></el-table-column>
              <el-table-column prop="bookNames" label="书名" width="70"></el-table-column>
              <el-table-column prop="authors" label="作者" width="40"></el-table-column>
              <el-table-column fixed="right" label="操作" width="80">
                <template slot-scope="scope">
                  <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button @click="deleteInformation(scope.row)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
              <el-table-column
                prop="scores"
                label="评分"
                width="80"
                v-for="(item,index) in tableData.slice(0,1)"
                :key="index"
              >
                <ul>
                  <li>
                    <Score :score="item.scores" />
                  </li>
                </ul>
              </el-table-column>
            </el-table>
            <!-- 星星 -->
            <!-- <div>
        <Score :score="rightData.scores" />
            </div>-->
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 诗词 -->
    <ul class="shici">
      <li>
        <h1>竹</h1>
      </li>
      <li>
        <h1>岩</h1>
      </li>
      <li>
        <h1>鸟</h1>
      </li>
      <li>
        <h1>啼</h1>
      </li>
      <li>
        <h1>云</h1>
      </li>
      <li>
        <h1>影</h1>
      </li>
      <li>
        <h1>闲</h1>
      </li>
      <li>--</li>
      <li>
        <h1>此</h1>
      </li>
      <li>
        <h1>是</h1>
      </li>
      <li>
        <h1>玉</h1>
      </li>
      <li>
        <h1>帝</h1>
      </li>
      <li>
        <h1>藏</h1>
      </li>
      <li>
        <h1>书</h1>
      </li>
      <li>
        <h1>山</h1>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import Score from "./stars/starComponent.vue";
export default {
  bookName: "information",
  components: {
    Score,
  },
  data() {
    return {
      checkInformation: "",
      id: "",
      rightData: {
        dates: "",
        bookNames: "",
        authors: "",
        scores: "",
      },
      tableData: [],
      loading: false,
      allInfo: [],
      showInfo: false,
      showInfo1: false,
      showInfo3: false,
      showInfo4: false,
      pageNumber: null,
      showPages: true,
    };
  },
  watch: {
    checkInformation(newValue, oldValue) {
      console.log(newValue);
    },
  },
  computed: {
    // 查询
    filterInformation() {
      return this.tableData.filter((information) => {
        return information.bookNames.match(this.checkInformation);
      });
    },
    total() {
      return this.allInfo.length;
    },
  },
  created() {
    this.getData();
    this.getFireBaseData();
  },
  methods: {
    deleteInformation(ids) {
      axios
        .delete(
          "https://bgonline-429b0.firebaseio.com/posts/" + ids.id + ".json"
        )
        .catch((error) => {
          console.log(error);
        });
      setTimeout(() => {
        this.$nextTick(() => {
          window.location.reload();
        });
      }, 1000);
    },
    changeInfomation(id) {
      // axios.put("https://bgonline-429b0.firebaseio.com/posts.json");

      axios
        .put(
          "https://bgonline-429b0.firebaseio.com/posts/" + this.id + ".json",
          this.rightData
        )
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
      setTimeout(() => {
        this.$nextTick(() => {
          window.location.reload();
        });
      }, 1000);
    },
    getFireBaseData() {
      axios
        .get("https://bgonline-429b0.firebaseio.com/posts.json", {})
        .then((res) => {
          // console.log(res);
          return res.data;
        })
        .then((data) => {
          for (let datas in data) {
            // try {

            // } catch (error) {

            // }
            data[datas].id = datas;
            this.tableData.push(data[datas]);
          }
        });
    },
    addInformation() {
      axios
        .post(
          "https://bgonline-429b0.firebaseio.com/" + "posts.json",
          this.rightData
        )
        .catch((error) => {
          console.log(error);
        });
      setTimeout(() => {
        this.$nextTick(() => {
          window.location.reload();
        });
      }, 1000);
    },
    edit(row) {
      this.rightData.dates = row.dates;
      this.rightData.authors = row.authors;
      this.rightData.bookNames = row.bookNames;
      this.rightData.scores = row.scores;
      this.id = row.id;
    },
    check(row) {
      console.log(row);
    },
    getData() {
      axios
        .get("https://jsonplaceholder.typicode.com/posts")
        .then((res) => {
          return res.data;
        })
        .then((data) => {
          this.allInfo = data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    del(index) {
      this.allInfo.splice(index - 1, 1);
    },
    handleSizeChange(val) {
      if (val == 20) {
        this.allInfo.forEach((all) => {
          //   console.log(all.id <= 5);
          if (all.id <= 20) {
            this.showInfo3 = true;
            this.showInfo = false;
            this.showInfo1 = false;
            return;
          }
        });
      }
      if (val == 10) {
        this.allInfo.forEach((all) => {
          //   console.log(all.id <= 5);
          if (all.id <= 10) {
            this.showInfo1 = true;
            this.showInfo3 = false;
            this.showInfo = false;
            return;
          }
        });
      }
      if (val == 5) {
        this.allInfo.forEach((all) => {
          //   console.log(all.id <= 5);
          if (all.id <= 5) {
            this.showInfo = true;
            this.showInfo1 = false;
            this.showInfo3 = false;

            return;
          }
        });
      }
      this.showPages = false;
    },
    handleCurrentChange(val) {
      this.showPage = true;
      this.showPages = true;
      this.showInfo = false;
      this.showInfo1 = false;
      this.showInfo3 = false;
      this.showInfo4 = false;
      this.pageNumber = val;
    },
  },
};
</script>

<style lang="less" scoped>
input {
  outline: 0;
}
#page {
  position: fixed;
  top: 550px;
  left: 0;
}
.information {
  position: absolute;
  top: 10%;
  left: 40px;
}
.showPage {
  width: 600px;

  height: 40px;

  .spanBody {
    width: 60%;
    border-bottom: 2px solid rgb(216, 58, 58);
    padding: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.edit-del {
  position: relative;
  top: -20px;
  padding: 5px 4px;
  left: 500px;
  i {
    padding: 0 5px;
  }
}
.el-icon-caret-top {
  font-size: 30px;
  text-align: center;
  line-height: -12px;
}
.right {
  position: absolute;
  left: 660px;
  top: 10px;
}
.btn {
  float: right;
}
.btn-add {
  float: left;
}
.border {
  border: 1px solid red;
}
.shici {
  position: absolute;
  top: 41px;
  left: 1241px;
  font-size: 30px;
  color: rgb(103, 98, 98);
}
</style>